<template>
	<view class="page">
		<connect-navigation :headPic="user.headPic"></connect-navigation>
		<scroll-view class="scroll-Y" :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
			<view class="search-button-block" :style="{'margin-top':height+100+'px'}">
				<button class="search-button"><label class="iconfont iconsousuo"></label>搜索</button>
			</view>
			<view class="inform-block">
				<view class="inform-list">
					<label>联系人</label>
					<label class="iconfont icon113fangxiang_xiangyou"></label>
				</view>
				<view class="inform-list">
					<label>群通知</label>
					<label class="iconfont icon113fangxiang_xiangyou"></label>
				</view>
			</view>
			
			<view class="friends-block">
				<view class="friends-menu">
					<scroll-view class="scroll-view_H" scroll-x="true" 
					@scroll="scroll">
						<view class="menu-item" :class='select == 0 ? "selected" : "" ' @click="select = 0">好友</view>
						<view class="menu-item" :class='select == 1 ? "selected" : "" ' @click="select = 1">分组</view>
						<view class="menu-item" :class='select == 2 ? "selected" : "" ' @click="select = 2">群聊</view>
						<view class="menu-item" :class='select == 3 ? "selected" : "" ' @click="select = 3">设备</view>
						<view class="menu-item" :class='select == 4 ? "selected" : "" ' @click="select = 4">通讯录</view>
						<view class="menu-item" :class='select == 5 ? "selected" : "" ' @click="select = 5">订阅号</view>
					</scroll-view>
				</view>
				
				<view class="friend-kinds">
					<pull-list name="特别关心" :list="specialConcernList"></pull-list>
					<pull-list name="我的好友" :list="commonList"></pull-list>
					<pull-list name="朋友" :list="friendList"></pull-list>
					<pull-list name="家人" :list="familyList"></pull-list>
					<pull-list name="同学" :list="schoolmateList"></pull-list>
				</view>
				<view class="friend-kinds" v-for="(value, key) in otherFriends" :key= key>
					<pull-list :name="key" :list="value"></pull-list>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	
	import utils from "@/common/util.js"
	import friend from "@/api/friend.js"
	
	var _self
	
	export default {
		data() {
			return {
				height:0,//获取的状态栏高度
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				select: 0,
				user: {}, // 用户信息
				specialConcernList: [], // 特别关心
				commonList: [], // 我的好友
				friendList: [], // 朋友
				familyList: [], // 家人
				schoolmateList: [], // 同学
				otherFriends: {}
				
			}
		},
		onLoad() {
			_self = this
			// 获取当前用户信息
			var userInfo = uni.getStorageSync("userInfo")
			if (userInfo == null) {
				uni.navigateTo({
					url:'../login/addAndRegister/addAndRegister',
					animationType: 'pop-in',
					animationDuration: 200
				})
			} else {
				this.user = userInfo
			}
			
			this.getFriends()
			
			// 5s更新一次数据
			// var updataFriendList = setInterval(function(){
			// 	_self.getFriendList();
			// },5000)
		},
		onPullDownRefresh() {
			// 获取好友列表
			this.getFriends()
			uni.stopPullDownRefresh()
		},
		methods: {
			async getFriends(){
				// 先判断本地有没有
				uni.getStorage({
					key:_self.user.id+"_friendList",
					async complete(result) {
						var friendList = result.data
						if(friendList === null || friendList === undefined || friendList === ''){
							friendList = await friend.gerFriendList()
							uni.setStorageSync(_self.user.id+"_friendList",friendList)
						}
						friendList.forEach(friend => {
							if(friend.friendGroup === "concern"){
								_self.specialConcernList.push(friend)
							}else if(friend.friendGroup === "common"){
								_self.commonList.push(friend)
							}else if(friend.friendGroup === "friend"){
								_self.friendList.push(friend)
							}else if(friend.friendGroup === "family"){
								_self.familyList.push(friend)
							}else if(friend.friendGroup === "schoolmate"){
								_self.schoolmateList.push(friend)
							}else {
								if(_self.otherFriends[friend.friendGroup] == undefined){
									_self.otherFriends[friend.friendGroup] = []
								}
								 _self.otherFriends[friend.friendGroup].push(friend)
							}
						})
						// 把自己添加进去
						_self.commonList.unshift(_self.user)
					}
				})
				
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		},
		onInit(){
			var _this=this;
			// 获取手机状态栏高度
			uni.getSystemInfo({
				success:function(data){
					// 将其赋值给this
					_this.height=data.statusBarHeight;
				}
			})
		}
	}
</script>

<style>
	@import url("contact.css");
</style>
